$(function () {
    // 核心思路： 不管按下回车，还是点击复选框，都是把本地存储的诗句加载到页面中
    // 本地存储里面只能存储字符串的数据格式，把数据对象转换为字符串格式 JSON.stringify()
    // 获取本地存储的数据，我们需要把里面的字符串数据转换成对象格式 JSON.parse()
    // 先读再改后存

    load();

    $("#title").on("keydown", function (event) {
        if (event.keyCode === 13 && $(this).val().length > 0) {
            // 从localStorage中获取数据
            var arr = getData();
            // 获取用户输入的数据，并包装成对象，
            arr.push({ title: $(this).val(), done: false });
            // 调用函数 存储数据
            setData(arr);
            load();
            $(this).val('');
        }
    })

    // 点击a删除本条
    $("ol,ul").on("click", "a", function () {
        // 获取数据
        var arr = getData();
        // 获取a的索引
        var index = $(this).attr("index");
        // 根据索引删除数据
        arr.splice(index, 1);
        setData(arr);
        load();
    })

    // 勾选todolist  状态改变
    $("ol,ul").on("click", "input", function () {
        // 获取数据
        var arr = getData();
        // 通过兄弟元素获取索引号
        var index = $(this).siblings("a").attr("index");
        // 通过索引取到对应数据，修改done为当前input状态
        arr[index].done = $(this).prop("checked");
        // 新数组写入localstorage
        setData(arr);
        // 重新渲染
        load();
    })



    function getData() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
        // 可以简写
        // JSON.parse(data || '[]');
    }

    // 将数据存入localstorage
    function setData(data) {
        // 将数据转换成字符串 再存入本地存储
        localStorage.setItem("todolist", JSON.stringify(data || []));
    }

    // 渲染页面
    function load() {
        var datas = getData();
        $("ol,ul").empty();
        var todocount = 0;
        var donecount = 0;
        // 遍历数据
        $.each(datas, function (i, n) {
            if (n.done) {
                $('ul').prepend("<li><input type='checkbox' checked>  <p>" + n.title + "</p> <a index='" + i + "' href='javascript:;' ></a></li>")
                donecount++;
            } else {
                $('ol').prepend("<li><input type='checkbox'>  <p>" + n.title + "</p> <a index='" + i + "' href='javascript:;' ></a></li>")
                todocount++;
            }
        })
        $("#donecount").html(donecount);
        $("#todocount").html(todocount)
    }




})